<!DOCTYPE html>

<script type="text/javascript">
  <!--
    var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || 'en').substr(0, 2).toLowerCase();

    if (lang != 'en' && lang != 'es' && lang != 'fr' && lang != 'de') {
      lang = 'en';
    }
  -->
</script>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>GW2 Ligre Timer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->    
    <link rel="shortcut icon" href="../assets/ico/favicon.png">

    <script type="text/javascript" src="js/text.js"></script>
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-static-top">
      <div class="navbar-inner">                
        <span class="brand title">Chest Event Timers - EOL</span>
        <ul class="nav">
          <li class=""><a href="#" data-toggle="modal" data-target="#myModal"><i class="icon-home icon-white"></i> Temple Status Checker</a></li>         
        </ul>
        <span id="clock" class="brand"></span>
      </div>
    </div>



    <div id="main" class="container-fluid">
      <div class="row-fluid">        
        <div class="span9">

          <div class="well well-small opciones">

            <div id="collapse" class="row-fluid collapse in"> 
              <div class="span6">                                 
                  <label><i class="icon-globe"></i> <span class="txt_1">Server</span> A <select id="serverA" name="serverA"><option value="none" class="initial txt_2">Select a server</option></select></label>
                  <label><i class="icon-globe"></i> <span class="txt_1">Server</span> B <select id="serverB" name="serverB"><option value="none" class="initial txt_2">Select a server</option></select></label>
                  <label><i class="icon-globe"></i> <span class="txt_1">Server</span> C <select id="serverC" name="serverC"><option value="none" class="initial txt_2">Select a server</option></select></label>   
                  <p class="center"><button id="update_timers" type="button" class="btn btn-primary nomargin"><strong><span class="txt_3_1">Update</span> <span class="txt_3_2">timers</span></strong></button></p>
              </div>
              <!--<div class="span2">
                <p><button id="update_timers" type="button" class="btn btn-large btn-primary"><span class="txt_3_1">Update</span><br /><span class="txt_3_2">timers</span></button></p>                
              </div>-->
              <div class="span3">
                <p><i class="icon-time"></i> <strong class="txt_4">Timers</strong></p>
                <p class="marginBmini"><label><input id="auto-refresh" class="bottom" type="checkbox" checked="checked" /> <span class="txt_5">Auto-refresh timers</span></label></p>
                <p class="marginBmini"><label><input id="notify_pre-events" class="bottom" type="checkbox" checked="checked" /> <span class="txt_6">Notify pre-events too</span></label></p>
                <p class="marginBmini"><label><input id="notify_sounds" class="bottom" type="checkbox" checked="checked" /> <span class="txt_7">Play alert sounds</span></label></p>
                <p class="useChromeInput"><label><input id="use_chrome" class="bottom" type="checkbox" /> <span class="txt_13">Use Chrome notifications</span></label></p>
                             
              </div>
              <div class="span3">
                <p><i class="icon-eye-open"></i> <strong class="txt_8">Visualization</strong></p>
                <p><label><input id="real_names" class="bottom" type="checkbox" checked="checked" /> <span class="txt_9">Use real names of events</span></label></p>
                <p><label><input id="table_condensed" class="bottom" type="checkbox" /> <span class="txt_10">Table condensed</span></label></p>
                <p><label><input id="table_characters" class="bottom" type="checkbox" /> <span class="txt_19">Show characters in table</span></label></p>
                <p><label><input id="table_hider" class="bottom" type="checkbox" /> <span class="txt_20">Hide completed events</span></label></p>
              </div>
            </div>          

            <div class="center">
              <button type="button" class="btn handler" data-toggle="collapse" data-target="#collapse"><i class="icon-cog"></i> <span class="txt_11">Settings</span></button> 
              <span id="timer_status">OFF</span>
            </div>
          </div>

		  <p class="aviso">Debido a la inclusión de los Megaservers en el juego la API de eventos dejó de funcionar por lo tanto los timers se han vuelto inútiles. Según ArenaNet están trabajando para hacer una nueva API que funcione, a ver cuánto tardan. De momento, aunque a veces el timer funciona, hay que guiarse por los horarios de los bosses, que aparecen en el listado de la derecha.</p>
          
          <table class="table table-striped" id="event_table">
            <thead>
              <tr id="servers">
                <td></td>
                <td class="t50 negrita bottom_full"><span class="txt_14 mright">Events completed</span> <button id="btn_reset" class="btn btn-mini txt_12">Reset all events</button> <button class="btn btn-mini btn-success btn_shower"><i class="icon-eye-open"></i></button> <span class="clock"></span></td>
                <td class="character">
                  <p class="nomargin"><img src="img/classes/warrior.png" />
                  <img src="img/classes/guardian.png" />
                  <img src="img/classes/engineer.png" />
                  <img src="img/classes/thief.png" /></p>
                  <p class="nomargin nopadding"><img src="img/classes/necromancer.png" />
                  <img src="img/classes/ranger.png" />
                  <img src="img/classes/elementalist.png" />
                  <img src="img/classes/mesmer.png" /></p>
                </td>
                <th class="serverA"><span class="txt_1">Server</span> A</th>
                <th class="serverB"><span class="txt_1">Server</span> B</th>
                <th class="serverC"><span class="txt_1">Server</span> C</th>
              </tr>
            </thead>
            <tfoot>
              <tr id="servers">
                <td></td>
                <td class="t50 negrita bottom_full"><span class="txt_14 mright">Events completed</span> <span class="clock"></span></td>
                <td class="character">
                  <p class="nomargin"><img src="img/classes/warrior.png" />
                  <img src="img/classes/guardian.png" />
                  <img src="img/classes/engineer.png" />
                  <img src="img/classes/thief.png" /></p>
                  <p class="nomargin nopadding"><img src="img/classes/necromancer.png" />
                  <img src="img/classes/ranger.png" />
                  <img src="img/classes/elementalist.png" />
                  <img src="img/classes/mesmer.png" /></p>
                </td>
                <th class="serverA"><span class="txt_1">Server</span> A</th>
                <th class="serverB"><span class="txt_1">Server</span> B</th>
                <th class="serverC"><span class="txt_1">Server</span> C</th>
              </tr>
            </tfoot>
            <tbody>              
            </tbody>
          </table>

          <p class="center"><strong>Leyenda:</strong> <span class="square active"></span> Activo <span class="square success"></span> Completado <span class="square preparation"></span> Preparativos <span class="square warmup"></span> Esperando <span class="square fail"></span> Fracasado</p>

        </div><!--/span-->

        <div id="alerts" class="span3">
			<ul class="nav nav-tabs" id="myTab">
			  <li class="active"><a href="#tabHoras" data-toggle="tab">Horarios de Eventos</a></li>
			  <li><a href="#tabEventos" data-toggle="tab">Historial</a></li>
			</ul>

			<div class="tab-content">
			  <div class="tab-pane active" id="tabHoras">
		          <div class="well well-small messagesBosses"></div>
			  </div>
			  <div class="tab-pane" id="tabEventos">
		          <div class="well well-small messages"></div>
			  </div>
			</div>
        </div><!--/span-->


      </div><!--/row-->



      <hr>

      <footer>
        <p>v1.5 <a href="htt://ligresoftware.ligreman.com">&copy; Ligre Software 2013</a></p>
        <p><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.es_CO"><img alt="Licencia Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Guild Wars 2 Ligre Timer</span> por <a xmlns:cc="http://creativecommons.org/ns#" href="http://ligreman.com/" property="cc:attributionName" rel="cc:attributionURL">Ligreman</a> se encuentra bajo una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.es_CO">Licencia Creative Commons Atribución-NoComercial-SinDerivadas 3.0 Unported</a>.<br />Basada en una obra en <a xmlns:dct="http://purl.org/dc/terms/" href="http://timer.ligreman.com/" rel="dct:source">http://timer.ligreman.com/</a>.</p>
        <p>[Android] <a href="https://play.google.com/store/apps/details?id=com.ligresoftware.gw2puzzleguide"><span class="txt_15">GW2 Puzzle Guide</span></a></p>
        <p>[Android] <a href="https://play.google.com/store/apps/details?id=com.ligresoftware.gw2pioneerguide"><span class="txt_16">GW2 Pioneer Guide</span></a></p>
      </footer>

    </div><!--/.fluid-container-->


    <div id="data" class="hidden">
      <div class="events">
        <!-- <span id="example">none</span> -->
      </div>
    </div>

    <audio id="audio_boss">
      <source src="audio/boss.mp3"></source>            
    </audio>
    <audio id="audio_default">
      <source src="audio/pres.mp3"></source>            
    </audio>


    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel" class="txt_17">Temple Status Check</h3>
      </div>
      <div id="modal-body" class="modal-body">          
          <table class="table table-striped" id="temples_table"></table>     
      </div>
      <div class="modal-footer">
        <button class="btn txt_18" data-dismiss="modal" aria-hidden="true">Close</button>
        <!--<button class="btn btn-primary">Save changes</button>-->
      </div>
    </div>


    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/general.js"></script>
    <script src="js/load_json.js"></script>    

    <script type="text/javascript" src="js/jquery.noty.js"></script>
    <script type="text/javascript" src="js/notytheme/bottomRight.js"></script>
    <script type="text/javascript" src="js/notytheme/default.js"></script>

    <script type="text/javascript">
      <!--
        $(document).ready(function() {
          var w_alto = $('#main').innerHeight();
          $('div.messages.well').height(w_alto+'px');// css('height', w_alto);
/*var dat = new Date();
console.log(dat)
console.log(dat.getUTCHours());
console.log(dat.getHours());
console.log(dat.getTimezoneOffset());*/

          //Traducir interfaz aquí
          $('.txt_1').text(text["server"]);
          $('.txt_2').text(text["select_server"]);
          $('.txt_3_1').text(text["update_timers"]);
          $('.txt_3_2').text(text["update_timers2"]);
          $('.txt_4').text(text["timers"]);
          $('.txt_5').text(text["autorefresh"]);
          $('.txt_6').text(text["notify_prevents"]);
          $('.txt_7').text(text["play_sounds"]);
          $('.txt_8').text(text["visualization"]);
          $('.txt_9').text(text["real_names"]);
          $('.txt_10').text(text["condensed"]);
          $('.txt_11').text(text["settings"]);
          $('.txt_12').text(text["reset_events"]);
          $('.txt_13').text(text["usechrome"]);
          $('.txt_14').text(text["done"]);
          $('.txt_15').text(text["gw2puzzleguide"]);
          $('.txt_16').text(text["gw2pioneerguide"]);
          $('.txt_17').text(text["status_check"]);
          $('.txt_18').text(text["close"]);
          $('.txt_19').text(text["character"]);
          $('.txt_20').text(text["hider"]);
       
          //Reloj
          clock();

		  //Tabs
		  //$('#myTab a:last').tab('show');

          //Modal
          $('#myModal').modal( { show:false } ) //, remote:'temples.html'
            .on('show', function () {
              //alert("que me muestro");
              checkTemples();
          });

          //Notificaciones Chrome
          if (window.webkitNotifications) {            
            if (window.webkitNotifications.checkPermission() != 0) {
              window.webkitNotifications.requestPermission();
            }
          } else {
            //Desactivo el check y lo hago desaparecer
            $('#use_chrome').removeAttr('checked');
            $('.useChromeInput').remove();
          }

          //Shower
          $('.btn_shower').on('click', function() {
              $('#event_table tr').show();
          });

        });
      //-->
    </script>
    


<script>
  /*function a() {
    setInterval(notify, 10000);
  }
  function notify() {
    var havePermission = window.webkitNotifications.checkPermission();
    if (window.webkitNotifications.checkPermission()==0) {
      // 0 is PERMISSION_ALLOWED
      var notification = window.webkitNotifications.createNotification(
        'http://crystaltales.net46.net/img/events/03BF176A-D59F-49CA-A311-39FC6F533F2F.jpg',
        'Tequalt the sunless acaba de aparecer!',
        '-claro de aurora-'+"    .           "+'ohhh'
      );

      notification.onclick = function () {        
        notification.close();
      }
      notification.ondisplay = function () {        
        setTimeout(function(){ notification.close(); }, 5000);
      }
      notification.show();
    } else {
        window.webkitNotifications.requestPermission();
    }
    
  }  

  if (window.webkitNotifications) {
    console.log("Notifications are supported!");
  } else {
    console.log("Notifications are not supported for this Browser/OS version yet.");
  }*/




  /***********
    //De inicio, para pedir permiso si acaso
      if (window.webkitNotifications) {
        var havePermission = window.webkitNotifications.checkPermission();
        if (havePermission != 0) {
          window.webkitNotifications.requestPermission();
        }
      } else {
        console.log("Notifications are not supported for this Browser/OS version yet.");
      }

    //A la hora de notificar, si tengo permiso y he activado las notificaciones de Chrome en preferencias
    //Si no, muestro notificación normal
  */
</script>

<!--<div style="width: 300px; height: 300px; background: yellow" onclick="notify()">
Cick here to notify
</div>-->


  </body>
</html>
